<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON 格式化</title>
    <link rel="stylesheet" href="json-formatter.css">
</head>
<body>
    <div class="header">
        <h1>JSON 格式化</h1>
        <div class="header-controls">
            <button class="btn btn-primary" id="save-btn">保存</button>
            <button class="btn btn-secondary" id="load-btn">加载</button>
        </div>
    </div>

    <div class="container">
        <div class="editor-panel">
            <div class="editor-header">
                <span>JSON 编辑器</span>
                <div class="editor-controls">
                    <button class="btn btn-primary" id="format-btn">格式化</button>
                    <button class="btn btn-primary" id="minify-btn">压缩</button>
                    <button class="btn btn-warning" id="smart-fix-btn">智能修复</button>
                    <button class="btn btn-primary" id="escape-btn">转义</button>
                    <button class="btn btn-primary" id="unescape-btn">去除转义</button>
                </div>
            </div>
            <div class="editor-content">
                <textarea id="json-input" placeholder="请输入或粘贴 JSON 数据..."></textarea>
                <div class="line-numbers" id="line-numbers">1</div>
            </div>
        </div>

        <div class="resizer" id="resizer"></div>

        <div class="preview-panel">
            <div class="preview-header">
                <span>预览</span>
                <div class="view-tabs">
                    <button class="tab-btn active" data-view="tree">树形</button>
                    <button class="tab-btn" data-view="excel">Excel</button>
                    <button class="tab-btn" data-view="yaml">YAML</button>
                </div>
            </div>
            <div class="preview-content" id="preview-content">
                <div class="placeholder">请在左侧输入 JSON 数据</div>
            </div>
        </div>
    </div>

    <div class="status-bar">
        <span id="status-text">就绪</span>
        <div class="status-info">
            <span id="line-count">1 行</span>
            <span id="char-count">0 字符</span>
            <span id="json-info">0 KB</span>
        </div>
    </div>

    <!-- 错误提示模态框 -->
    <div id="error-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>JSON 语法错误</h3>
                <span class="close" id="error-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="error-details" id="error-details"></div>
            </div>
        </div>
    </div>

    <!-- 智能修复结果模态框 -->
    <div id="repair-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>智能修复结果</h3>
                <span class="close" id="repair-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="repair-info" id="repair-info"></div>
                <div class="diff-stats" id="diff-stats" style="display: none;">
                    <div class="diff-stat-item">
                        <span>修复统计:</span>
                    </div>
                    <div class="diff-stat-item">
                        <span class="diff-stat-badge changed" id="changed-count">变更: 0</span>
                    </div>
                </div>
                <div class="repair-diff">
                    <div class="diff-section">
                        <h4>修复前</h4>
                        <pre id="original-content"></pre>
                    </div>
                    <div class="diff-section">
                        <h4>修复后</h4>
                        <pre id="repaired-content"></pre>
                    </div>
                </div>
                <div class="modal-buttons">
                    <button class="btn btn-primary" id="apply-repair">应用修复</button>
                    <button class="btn btn-secondary" id="cancel-repair">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 保存模态框 -->
    <div id="save-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>保存 JSON</h3>
                <span class="close" id="save-close">&times;</span>
            </div>
            <div class="modal-body">
                <label for="save-name">请输入保存名称:</label>
                <input type="text" id="save-name" placeholder="例如：用户数据">
                <div class="modal-buttons">
                    <button class="btn btn-primary" id="save-confirm">保存</button>
                    <button class="btn btn-secondary" id="save-cancel">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载模态框 -->
    <div id="load-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>加载历史记录</h3>
                <span class="close" id="load-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="history-list" id="history-list">
                    <!-- 动态生成历史记录 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 jsonrepair 库 -->
    <script src="jsonrepair.js"></script>
    <script src="json-formatter.js"></script>
</body>
</html> 